@charset "UTF-8";
/*网站通用样式及组件*/ 
// 间距
.ml{
  margin-left: $num;
}

.ml-sm{
  margin-left: $num-sm;
}

.ml-lg{
  margin-left: $num-lg;
}

.ml-0{
  margin-left: 0;
}

.mr{
  margin-right: $num;
}

.mr-sm{
  margin-right: $num-sm;
}

.mr-lg{
  margin-right: $num-lg;
}

.mr-0{
  margin-right: 0;
}

.mt{
  margin-top: $num;
}

.mt-sm{
  margin-top: $num-sm;
}

.mt-lg{
  margin-top: $num-lg;
}

.mt-0{
  margin-top: 0;
}

.mb{
  margin-bottom: $num;
}

.mb-sm{
  margin-bottom: $num-sm;
}

.mb-lg{
  margin-bottom: $num-lg;
}

.mb-0{
  margin-bottom: 0;
}


//显示隐藏
.show{
  display: block;
}
.hide{
  display: none;
}

.vs-show{
  visibility: visible;
}

.vs-hide{
  visibility: hidden;
}

//浮动
.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

//文字对齐
.text-center{
  text-align: center;
}

.text-left{
  text-align: left;
}

.text-right{
  text-align: right;
}

.text-justify{
  text-align: justify;
}

//文字样式-颜色
.text-default{
  color: $color;
}

.text-primary{
  color: $color-primary;
}

.text-light,
.text-tips
{
  color: $color-light;
}

.text-lighter{
  color: $color-lighter;
}

.text-lightest{
  color: $color-lightest;
}

.text-success{
  color: $color-success;
}

.text-error{
  color: $color-error;
}

.text-warning{
  color: $color-warning;
}

.text-danger{
  color: $color-danger;
}

.text-disabled{
  color: $color-disabled;
}

.text-price{
  color: $color-price;
}

.text-white{
  color: #fff;
}

//文字样式-字号
.text-lg{
  font-size: $size-lg;
}

.text-mlg{
  font-size: $size-mlg;
}

.text-blg{
  font-size: $size-blg;
}

.text-sm{
  font-size: $size-sm;
}

.text-md{
  font-size: $size;
}

.text-bold,
.text-700{
  font-weight: 700;
}

.text-normal,
.text-400{
  font-weight: 400;
}

.text-underline{
  text-decoration: underline;
  &:hover{
    text-decoration: underline;
  }
}

.text-indent{
  text-indent: 2em;
}

.text-required{
  color: #f00;
  font-weight: 400;
}

// 边框
.border{
  border: 1px solid $color-border;
}

.border-none{
  border: none;
}

.border-right-none{
  border-right: none;
}

.border-left-none{
  border-left: none;
}

.border-top-none{
  border-top: none;
}

.border-bottom-none{
  border-bottom: none;
}

.panel-box{
  position: absolute;
  .panel-hd{
    height: 28px;
    line-height: 28px;
    background: #7398E8;
    color: #fff;
    border-radius: 12px 12px 0 0;
    text-align: center;
  }
  .panel-bd{
    border: 1px dashed #979797;
    border-top: none;
    min-height: 20px;
    padding: 5px 9px 4px 9px;
    border-radius: 0 0 12px 12px;
  }
}
.panel{
  position: absolute;
}
// Popovers
$popover-zindex: 99; // z-index
$popover-max-width: 300px;// 最大宽度
$popover-bg: rgba(71,71,71,.8); // 背景色
$popover-color: #fff;//文字颜色
$popover-border-color: none; // 边框色
$popover-fallback-border-color: none; // 为不支持rgba颜色准备的色值
$popover-radius: $radius; // 圆角

$popover-title-bg: none; // 头部背景色
$popover-title-height: 30px; //头部高度
$popover-title-padding: $num; //头部左右补白
$popover-content-padding: 10px $num; //内容区域补白

$popover-arrow-width: 6px;//三角大小
$popover-arrow-color: $popover-bg; //三角形背景色
$popover-arrow-outer-width: $popover-arrow-width + 1;
$popover-arrow-outer-color: $popover-border-color;//三角形边框
$popover-arrow-outer-fallback-color: $popover-fallback-border-color;//三角形边框


.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: $popover-zindex;
  display: none;
  max-width: $popover-max-width;
  // padding: 1px;
  font-size: $size;
  color: $popover-color;
  background-color: $popover-bg;
  background-clip: padding-box;
  border: 1px solid $popover-fallback-border-color;
  border: 1px solid $popover-border-color;
  border-radius: $popover-radius;
  text-align: left;
  @include shadow();

  // Offset the popover to account for the popover arrow
  &.top     { margin-top: -$popover-arrow-width - 4; }
  &.right   { margin-left: $popover-arrow-width + 4; }
  &.bottom  { margin-top: $popover-arrow-width + 4; }
  &.left    { margin-left: -$popover-arrow-width - 4; }
}

.popover-title {
  margin: 0; // reset heading margin
  height: $popover-title-height;
  line-height: $popover-title-height;
  padding: 0 $popover-title-padding;
  font-size: $size;
  background-color: $popover-title-bg;
  border-bottom: 1px solid $popover-border-color;
  border-radius: ($popover-radius - 1) ($popover-radius - 1) 0 0;
  display: none;
}

.popover-content {
  padding: $popover-content-padding;
  
}

// Arrows
//
// .arrow is outer, .arrow:after is inner

.popover > .arrow {
  &,
  &:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }
}
.popover > .arrow {
  border-width: $popover-arrow-outer-width;
}
.popover > .arrow:after {
  border-width: $popover-arrow-width;
  content: "";
}

.popover {
  &.top > .arrow {
    left: 50%;
    margin-left: -$popover-arrow-outer-width;
    border-bottom-width: 0;
    border-top-color: $popover-arrow-outer-fallback-color; // IE8 fallback
    border-top-color: $popover-arrow-outer-color;
    bottom: -$popover-arrow-outer-width;
    &:after {
      content: " ";
      bottom: 1px;
      margin-left: -$popover-arrow-width;
      border-bottom-width: 0;
      border-top-color: $popover-arrow-color;
    }
  }
  &.right > .arrow {
    top: 50%;
    left: -$popover-arrow-outer-width;
    margin-top: -$popover-arrow-outer-width;
    border-left-width: 0;
    border-right-color: $popover-arrow-outer-fallback-color; // IE8 fallback
    border-right-color: $popover-arrow-outer-color;
    &:after {
      content: " ";
      left: 1px;
      bottom: -$popover-arrow-width;
      border-left-width: 0;
      border-right-color: $popover-arrow-color;
    }
  }
  &.bottom > .arrow {
    left: 50%;
    margin-left: -$popover-arrow-outer-width;
    border-top-width: 0;
    border-bottom-color: $popover-arrow-outer-fallback-color; // IE8 fallback
    border-bottom-color: $popover-arrow-outer-color;
    top: -$popover-arrow-outer-width;
    &:after {
      content: " ";
      top: 1px;
      margin-left: -$popover-arrow-width;
      border-top-width: 0;
      border-bottom-color: $popover-arrow-color;
    }
  }

  &.left > .arrow {
    top: 50%;
    right: -$popover-arrow-outer-width;
    margin-top: -$popover-arrow-outer-width;
    border-right-width: 0;
    border-left-color: $popover-arrow-outer-fallback-color; // IE8 fallback
    border-left-color: $popover-arrow-outer-color;
    &:after {
      content: " ";
      right: 1px;
      border-right-width: 0;
      border-left-color: $popover-arrow-color;
      bottom: -$popover-arrow-width;
    }
  }
}
// 线-横线
.line-horizontal{
  position: absolute;
  left: 0;
  background: $line-success;
  height: 1px;
  &.is-disabled{
    background: $line-disabled;
    z-index: 20;
    .star{
      display: none;
    }
    &.is-arrow:after{
      border-color: $line-disabled;
    }
  }
  &.is-error{
    background: $line-error;
    z-index: 10;
    .star{
      display: none;
    }
    &.is-arrow:after{
      border-color: $line-error;
    }
  }
}
// 线-竖线
.line-vertical{
  position: absolute;
  top: 0;
  background: $line-success;
  width: 1px;
  &.is-disabled{
    background: $line-disabled;
    z-index: 20;
    .star{
      display: none;
    }
    &.is-arrow:after{
      border-color: $line-disabled;
    }
  }
  &.is-error{
    background: $line-error;
    z-index: 10;
    .star{
      display: none;
    }
    &.is-arrow:after{
      border-color: $line-error;
    }
  }
}
// 线-向上
.line-to-top{
  position: absolute;
  top: 0;
  bottom: 0;
  background: $line-success;
  width: 1px;
  // 箭头
  &.is-arrow:after{
    content: '';
    position: absolute;
    top: 0;
    left: -2px;
    width: 5px;
    height: 5px;
    border-top: 1px solid $line-success;
    border-left: 1px solid $line-success;
    transform: rotate(45deg);
  }
  &.is-disabled{
    background: $line-disabled;
    z-index: 20;
    .star{
      display: none;
    }
    &.is-arrow:after{
      border-color: $line-disabled;
    }
  }
  &.is-error{
    background: $line-error;
    z-index: 10;
    .star{
      display: none;
    }
    &.is-arrow:after{
      border-color: $line-error;
    }
  }
  // 光点
  .star{
    position: absolute;
    bottom: 0;
    left: -2px;
    width: 5px;
    height: 12px;
    opacity: 0;
    background: url(../images/star.png);
    background-size: 100% 100%;
  }
}
// 线-向下
.line-to-bottom{
  position: absolute;
  top: 0;
  bottom: 0;
  background: $line-success;
  width: 1px;
  // 箭头
  &.is-arrow:after{
    content: '';
    position: absolute;
    bottom: 0;
    left: -2px;
    width: 5px;
    height: 5px;
    border-bottom: 1px solid $line-success;
    border-right: 1px solid $line-success;
    transform: rotate(45deg);
  }
  &.is-disabled{
    background: $line-disabled;
    z-index: 20;
    .star{
      display: none;
    }
    &.is-arrow:after{
      border-color: $line-disabled;
    }
  }
  &.is-error{
    background: $line-error;
    z-index: 10;
    .star{
      display: none;
    }
    &.is-arrow:after{
      border-color: $line-error;
    }
  }
  // 光点
  .star{
    position: absolute;
    top: 0;
    left: -2px;
    width: 5px;
    height: 12px;
    opacity: 0;
    background: url(../images/star.png);
    background-size: 100% 100%;
  }
}
// 线-向左
.line-to-left{
  position: absolute;
  left: 0;
  right: 0;
  background: $line-success;
  height: 1px;
  // 箭头
  &.is-arrow:after{
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 5px;
    height: 5px;
    border-bottom: 1px solid $line-success;
    border-left: 1px solid $line-success;
    transform: rotate(45deg);
  }
  &.is-disabled{
    background: $line-disabled;
    z-index: 20;
    .star{
      display: none;
    }
    &.is-arrow:after{
      border-color: $line-disabled;
    }
  }
  &.is-error{
    background: $line-error;
    z-index: 10;
    .star{
      display: none;
    }
    &.is-arrow:after{
      border-color: $line-error;
    }
  }
  // 光点
  .star{
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 12px;
    height: 5px;
    opacity: 0;
    background: url(../images/star2.png);
    background-size: 100% 100%;
  }
}
// 线-向右
.line-to-right{
  position: absolute;
  left: 0;
  right: 0;
  background: $line-success;
  height: 1px;
  // 箭头
  &.is-arrow:after{
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 5px;
    height: 5px;
    border-top: 1px solid $line-success;
    border-right: 1px solid $line-success;
    transform: rotate(45deg);
  }
  &.is-disabled{
    background: $line-disabled;
    z-index: 20;
    .star{
      display: none;
    }
    .is-arrow:after{
      border-color: $line-disabled;
    }
  }
  &.is-error{
    background: $line-error;
    z-index: 10;
    .star{
      display: none;
    }
    .is-arrow:after{
      border-color: $line-error;
    }
  }
  // 光点
  .star{
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 12px;
    height: 5px;
    opacity: 0;
    background: url(../images/star2.png);
    background-size: 100% 100%;
  }
}
// 错误
.is-error{
  z-index: 10;
  .line-to-top,
  .line-to-bottom,
  .line-to-left,
  .line-to-right,
  .line-horizontal,
  .line-vertical{
    background: $line-error;
    z-index: 10;
    .star{
      display: none;
    }
  }
  .is-arrow:after{
    border-color: $line-error;
  }
}
// 错误
.is-disabled{
  z-index: 20;
  .line-to-top,
  .line-to-bottom,
  .line-to-left,
  .line-to-right,
  .line-horizontal,
  .line-vertical{
    background: $line-disabled;
    z-index: 20;
    .star{
      display: none;
    }
  }
  .is-arrow:after{
    border-color: $line-disabled;
  }
}
.line-vertical-group{
  position: relative;
  width: 13px;
  height: 20px;
  .line-to-top{
    left: 0;
    .star{
      animation-duration: 1.2s;
      transform: translateY(-18px);
    }
  }
  .line-to-bottom{
    right: 0;
    .star{
      animation-duration: 1.2s;
      transform: translateY(18px);
    }
  }
}
// 光点
.star{
  animation: moveStar .8s linear infinite;
  &:nth-child(1){
    animation-delay: 0;
  }
  &:nth-child(2){
    animation-delay: -0.5s;
  }
  &:nth-child(3){
    animation-delay: -1s;
  }
  &:nth-child(4){
    animation-delay: -1.5s;
  }
  &:nth-child(5){
    animation-delay: -2s;
  }
  &:nth-child(6){
    animation-delay: -2.5s;
  }
  &:nth-child(7){
    animation-delay: -3s;
  }
  &:nth-child(8){
    animation-delay: -3.5s;
  }
  &:nth-child(9){
    animation-delay: -4s;
  }
  &:nth-child(10){
    animation-delay: -4.5s;
  }
  &:nth-child(11){
    animation-delay: -5s;
  }
  &:nth-child(12){
    animation-delay: -5.5s;
  }
}
@keyframes moveStar{
  0%{
    transform: translate(0);
    opacity: 0;
  }
  5%,95%{
    opacity: 1
  }
}
/*提示窗*/
.tooltip-wrap{
  position: absolute;
  //width: 220px;
  // padding:4px;
  // bottom: 2px;
  // top: auto;
  left: 50%;
  transform: translateX(-50%);
  //min-width: 442px;
  height: 100%;
  .panel-tooltip {
    //position: relative;
    transform: translateX(-50%);
  }
}
$color-tooltip:#F1FDFB;
$tooltip-border:#50E3C2;
$color-primary:#50E3C2;
$arrow-width:4px;
.panel-tooltip{
  position: absolute;
  border: 1px solid $tooltip-border;
  //background: #fff;
  z-index: 2001;
  color:$color-primary;
  .panel-title{
    font-size: $size-mlg;
    float: left;
    margin-right: $num;
    color: $color-secondary;
  }
  .tooltip-close{
    position: absolute;
    top: 13px;
    right: 5px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: $color-secondary;
    @extend .text-bold;
    .icon{
      font-size: $size-sm;
    }
    &:hover{
      color: $color-hover;
    }
  }
  .tooltip-bd{
    padding: 0px 4px;
    //border: 1px solid #030E1E;
    overflow: auto;
    //background: #030E1E; //$bg-dark
    border-radius: 1px;
    background-color: #F1FDFB;
    //box-shadow: 0 0 1px 1px rgba($color-primary,.6);
    min-width: 40px;
    text-align: center;
  }
  .tooltip-hd{
    height: 40px;
    padding: 5px 20px;
    line-height: 30px;
    background: $bg-light;
  }
  .tooltip-txt{
    line-height: 20px;
    padding: 4px 10px;
  }
  .tooltip-arw{
    width: 12px;
    height: $arrow-width;
    position: absolute;
    top: -$arrow-width;
    left: 50%;
    margin-left: -$arrow-width;
    &:before{
      content:"";
      position: absolute;
      top: 0;
      left: 0;
      @include arrow(top,$arrow-width,$color-primary);
    }
    &:after{
      content:"";
      position: absolute;
      top: 1px;
      left: 0;
      @include arrow(top,$arrow-width,$color-tooltip);
    }
  }
  // 显示在上部
  &.top,&.top-left,&.top-right{
    //top: auto;
    //bottom: 0;
    margin-top: -24px;
    .tooltip-arw{
      top: auto;
      bottom: -$arrow-width;
    }
    .tooltip-arw:before{
      top: 0;
      left: 0;
      @include arrow(bottom,$arrow-width,$color-primary);
    }
    .tooltip-arw:after{
      content:"";
      position: absolute;
      top: -1px;
      left: 0;
      @include arrow(bottom,$arrow-width,$color-tooltip);
    }
  }

  &.top{
    .tooltip-arw{
      left: 50%;
      margin-left: -$arrow-width;
    }
  }
  &.top-right { 
    .tooltip-arw{
      
    }
  }
  &.top-left { 
    .tooltip-arw{
      left: auto;
      right: 10px;
    }
  }
  // 显示在上部
  /*&.bottom,&.bottom-left,&.bottom-right{
    .tooltip-arw{
      bottom: auto;
      top: -$arrow-width;
    }
    .tooltip-arw:before{
      bottom: 0;
      left: 0;
      @include arrow(top,$arrow-width,$color-primary);
    }
    .tooltip-arw:after{
      content:"";
      position: absolute;
      top: -1px;
      left: 0;
      @include arrow(top,$arrow-width,$color-tooltip);
    }
  }
   &.bottom-left { 
    .tooltip-arw{
      left: auto;
      right: 10px;
    }
  }
  &.bottom-right { 
    .tooltip-arw{
      left: 10px;
    }
  }
  &.bottom{
    .tooltip-arw{
      left: 50%;
      margin-left: -$arrow-width;
    }
  }*/
  //显示在下部
  &.bottom,&.bottom-left,&.bottom-right{
    top: 7px;
  }
  &.bottom-left { 
    .tooltip-arw{
      left: auto;
      right: 4px;
    }
  }
  &.bottom-right { 
    .tooltip-arw{
      left: 10px;
    }
  }
  &.bottom{
    .tooltip-arw{
      left: 50%;
      margin-left: -$arrow-width;
    }
  }
  // 显示在右侧
  &.right-bottom,&.right-top, &.right { 
    .tooltip-arw{
      width: $arrow-width;
      height: 12px;
      left: -$arrow-width;
      top: 10px;
    }
    .tooltip-arw:before{
      top: 0;
      left: 0;
      @include arrow(left,$arrow-width,$color-primary);
    }
    .tooltip-arw:after{
      content:"";
      position: absolute;
      top: 0px;
      left: 1px;
      @include arrow(left,$arrow-width,$color-tooltip);
    }
  }
  &.right-bottom{
    .tooltip-arw{
      top: 10px;
    }
  }
  &.right-top{
    .tooltip-arw{
      top: auto;
      bottom: 10px;
    }
  }
  &.right{
    .tooltip-arw{
      top: 50%;
      margin-top: -$arrow-width;
    }
  }
  // 显示在左侧
  &.left-bottom,&.left-top, &.left { 
    margin-top: 0;
    //left: -100%;
    transform: translateX(-100%);
    left:-8px;
    top: 35%;
    .tooltip-arw{
      width: $arrow-width;
      height: 12px;
      left: auto;
      right: -$arrow-width;
      top: 8px;
    }
    .tooltip-arw:before{
      top: 0;
      left: 0;
      @include arrow(right,$arrow-width,$color-primary);
    }
    .tooltip-arw:after{
      content:"";
      position: absolute;
      top: 0px;
      left: auto;
      right: 1px;
      @include arrow(right,$arrow-width,$color-tooltip);
    }
  }
  &.left-bottom{
    .tooltip-arw{
      top: 8px;
    }
  }
  &.left-top{
    .tooltip-arw{
      top: auto;
      bottom: 8px;
    }
  }
  &.left{
    .tooltip-arw{
      top: 50%;
      margin-top: -$arrow-width;
    }
  }
} 
